<template>
  <div>
    <el-form
      ref="EditForm"
      :model="EditForm"
      label-width="80px"
      style="width:84%;"
      :rules="editFormRules"
      status-icon
    >
      <el-form-item label="昵称" prop="userName">
        <el-input v-model="EditForm.userName" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="EditForm.gender">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="EditForm.age"></el-input>
      </el-form-item>
      <el-form-item label="积分" prop="integ">
        <el-input v-model.number="EditForm.integ"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="EditForm.email" @blur="emailBlur()"></el-input>
      </el-form-item>
    </el-form>
    <!--按钮-->
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="edit()">保存</el-button>
      <el-button @click="reset()">重置</el-button>
    </span>
  </div>
</template>
<script>
export default {
  props: ['scope'],
  data() {
    // 年龄的校验
    var checkAge = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('不能为空'))
      } else if (value > 150) {
        callback(new Error('别闹'))
      } else {
        callback()
      }
    }
    // 邮箱的校验
    var checkEmail = (rule, value, callback) => {
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (value === '无' || value === '') {
        callback()
      } else if (regEmail.test(value)) {
        callback()
      }
      callback(new Error('请输入合法的邮箱'))
    }
    return {
      EditForm: {
        userName: '',
        age: '',
        gender: '男',
        email: '',
        integ: ''
      },
      afterEdit: {},
      // 表单校验
      editFormRules: {
        age: [{ validator: checkAge, type: 'number', trigger: 'blur' }],
        integ: [
          {
            type: 'number',
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }
        ],
        email: [{ validator: checkEmail, trigger: 'blur' }]
      }
    }
  },
  created() {
    this.comm.assignmentObject(this.scope, this.EditForm)
  },
  methods: {
    // 保存
    async edit() {
      // console.log(this.EditForm)
      // console.log(this.scope)
      var d
      await this.comm
        .compareObject(this.scope, this.EditForm)
        .then(async data => {
          if (JSON.stringify(data) === '{}') {
            return (d = 1)
          }
          this.comm.genderChange(0, data)
          const res = await this.$http.post('/editDetail', {
            username: this.scope.userName,
            editData: data
          })
          if (res.meta.status !== 200) {
            this.$Message.error('服务器发生错误，请重试')
          }
          this.$Message.success('修改成功')
        })
      if (d) {
        return
      }
      this.$router.go(0)
    },

    // 邮箱失去焦点将‘’改为空
    emailBlur() {
      if (this.EditForm.email === '') {
        this.EditForm.email = '无'
      }
    },
    // 重置
    reset() {
      this.$refs.EditForm.resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
.dialog-footer {
  display: flex;
  justify-items: center;
  .el-button {
    margin: 0 auto -10px;
  }
}
</style>
